<template>
    <div class="book-detail f f-ac f-col">
        <Breadcrumb style="color: #000;" router />
        <div class="book-detail-body">
            <div class="f f-w f-jb ">
                {{detail.directory}}
            </div>
            <div class="f f-w f-jb ">
                <div class="book-item line-1 mb-30" v-html="detail.content" />
            </div>
            <el-button type="success" @click="toPre" v-if="detail.last">上一章</el-button>
            <el-button type="success" @click="toNext" v-if="detail.next">下一章</el-button>
            <Page-tool :page="currentPage" @change-page="changePage" />
        </div>
    </div>
</template>

<script>
    import {
        bookContent
    } from "@/utils/book/index.js";
    export default {
        data() {
            return {
                currentPage: 1,
                detail: {},
                id: '',
                count: '',
                num: ''
            };
        },
        created() {
            this.id = this.$route.query.id
            this.count = Number(this.$route.query.count)
            this.num = Number(this.$route.query.num)
            console.log(this.count, this.num)
            this.getDetails(this.id);
        },
        methods: {
            // 获取目录
            toPre() {
                this.num -- 
                if(this.detail.last)
                this.getDetails(this.detail.last)
            },

            toNext() {
                this.num ++
                if(this.detail.next){
                    this.getDetails(this.detail.next)
                }
                
            },
            // 获取目录
            getDetails(id) {
                let that = this
                bookContent(id).then((response) => {
                    if (response.code == 200) {
                        that.detail = response.data
                    }

                });
            },
            // 切换页数
            changePage(page) {
                this.currentPage = page;
                this.getList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .book-detail {
        width: 100%;
        background: #D2E4D6;

        &-body {
            width: 1200px;
            padding: 30px 0;
            box-sizing: border-box;

            .book-item {

                color: #313131;
                font-size: 14px;

                &:hover {
                    cursor: pointer;
                    color: #0b4bb7;
                }
            }
        }
    }
</style>